<template>
	<view class="content">
		<view class="toptop" @click="changeDialog()">
			<!-- 确认订单 -->
			<view class="order-info">
				<view class="order-info-title" style="font-size: 18px;color: black;">确认订单</view>
				<block v-for="(item,index) in orderDetail" :key="index">
					<view class="cart-list-box">
						<view class="list-info">
							<view style="margin-bottom: 10px;">{{item.goodsName}}</view>
							<block v-for="(i,index2) in item.ingredientList" :key="index2">
								<span style="margin-right: 5px;font-size: 12px;color: #A3A3A3;">{{i}}</span>
							</block>
						</view>
						<view style="width:50%;padding:10px;">
							<view style="float:right">
								<view style="color:#A3A3A3">x {{item.count}}</view>
								<view>¥ {{item.price * item.count}}</view>
							</view>
						</view>
					</view>
				</block>
				<view class="cart-list-box order-sum" style="padding-bottom: 8px;">
					<label>总计 </label>
					<view style="display: flex;flex-direction: column;padding-right: 10px;">
						<label class="order-sum-number activity-color" style="text-align: right;">¥
							{{totalPrice}}</label>
						<view style="margin-top: 5px;font-size: 14px;text-align: right;">折扣：<span
								style="">{{discount}}</span>
						</view>
						<view style="text-align: right;font-size: 14px;">优惠：<span
								style="font-size: 14px;">￥{{saveMoney}}</span>
						</view>
						<view style="margin-top: 5px;">应付：<span
								style="color:#ffa13f;font-size: 18px;">￥{{payMoney}}</span></view>
					</view>
				</view>
			</view>
			<view class="order-info" style="margin-top: 10px; font-size: 16px;">
				<view class="order-info-title flex-display" style="color: black;" @click="getAddress()">
					<span v-if="!address">选择收货地址</span>
					<span v-else>地址</span>
					<view class="order-info-li">{{address}}</view>
				</view>
			</view>
		</view>
		<!-- 去支付 -->
		<view class="bottom-operate-menu">
			<view class="shopping-cart">
				<view style="padding:15px;display:flex;font-size:28rpx;">
					<view class="shopping-cart-price" style="color:white;font-size:18px">合计：¥
						{{totalPrice*discount}}
					</view>
				</view>
			</view>
			<view class="submit-btn activity-color-bg" bindtap="gotopay">
				<view class="submit-btn-label color-white" @click="showQr()">去支付</view>
			</view>
		</view>
		<!-- 二维码弹窗 -->
		<view class="dialog" v-show="showDialog">
			<image class="img" src="../../static/imgs/微信图片_收款码.jpg" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderDetail: [],
				discount: uni.getStorageSync("userInfo").discount,
				showDialog: false,
				time: '',
				address: "",
				userInfo: uni.getStorageSync("userInfo"),
				carList: []
			};
		},
		computed: {
			//总价
			totalPrice() {
				let money = 0;
				this.orderDetail.forEach(item => {
					money += item.price
				})
				return money
			},
			//优惠金额
			saveMoney() {
				return this.totalPrice * (1 - this.discount)
			},
			payMoney() {
				return this.totalPrice * this.discount
			}
		},
		onLoad(options) {
			const data = JSON.parse(decodeURIComponent(options.data))
			this.orderDetail = data.carShowList
			this.carList = data.carList
			this.carList.forEach((item, index) => {
				delete item.imgFile
			})
		},

		methods: {

			//计算相同商品
			countEqualPairs(arr) {
				// 创建一个新的数组，用来存储不重复的商品信息
				const goodsArr = [];
				// 创建一个空对象，用来记录新数组中相同对象的个数
				const goodsObj = {};
				arr.forEach(good => {
					// 将 good 中的 goodNum 和 status 属性删除
					const {
						goodNum,
						status,
						...newGood
					} = good;
					// 将剩下的属性组成一个新的 JSON 对象
					const newGoodStr = JSON.stringify(newGood);
					// 如果新数组中没有该对象，则将其添加到新数组中，并将个数设为 1
					if (!goodsObj[newGoodStr]) {
						goodsObj[newGoodStr] = 1;
						goodsArr.push({
							...newGood
						});
					} else {
						// 否则将相同对象的个数加 1
						goodsObj[newGoodStr]++;
					}
				});
				// 将新数组中相同对象的个数保存到 count 属性中
				goodsArr.forEach(good => {
					const goodStr = JSON.stringify(good);
					good.count = goodsObj[goodStr];
				});
				return goodsArr
			},
			//支付
			showQr() {

				if (!this.address) {
					uni.showToast({
						title: "请先选择收货地址",
						icon: 'none'
					})
					return
				}

				console.log("**************");
				if (!this.userInfo.phone) {
					uni.showToast({
						title: "请先绑定手机号",
						icon: 'none'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 1500)
					return
				}
				this.showDialog = true
				this.time = setTimeout(async () => {
					let params = {
						goods: this.carList,
						totalPrice: this.totalPrice,
						payMoney: this.payMoney,
						saveMoney: this.saveMoney,
						status: 1,
						receiverName: this.userInfo.phone,
						receiverPhone: this.userInfo.phone,
						receiverAddress: this.address,
						phone: this.userInfo.phone,
						discount: this.discount
					}

					let res = await uni.$http.order.reqAddOrder(params)
					console.log(res, "099999999999999999999999");
					if (res.code == "200") {
						uni.redirectTo({
							url: '/pages/orderFood/orderFood?data=1'
						})
					} else {
						uni.showToast({
							title: "支付失败",
							icon: 'error'
						})
					}

				}, 3000)
			},
			// 关闭弹窗
			changeDialog() {
				if (!this.showDialog) return
				this.showDialog = !this.showDialog
				clearTimeout(this.time)
				uni.showToast({
					title: "支付失败",
					icon: 'error'
				})
			},
			async getAddress() {
				let res = await uni.chooseAddress()
				if (res[1]) {
					let {
						cityName,
						countyName,
						detailInfo,
						provinceName
					} = res[1]
					this.address = provinceName + cityName + countyName + detailInfo
				}
			}


		}

	}
</script>

<style lang="scss">
	.content {
		// width: 100wh;
		height: 100%;
		background-color: #f2f2f2;


		.dialog {
			width: 70%;
			// height: 70%;
			background-color: #fff;
			position: fixed;
			top: 45%;
			left: 50%;
			transform: translate(-50%, -50%);

			.title {
				text-align: center;
				padding: 10px 0;
			}

			.img {
				width: 100%;
				height: 100%;
			}
		}


	}

	.order-info {
		background-color: #fff;
	}

	.order-info-title {
		padding: 10px 0;
		padding-left: 10px;
		font-size: 12px;
		color: #a3a3a3;
	}

	.cart-list-box {
		border-top: 1px solid #ececec;
		padding-top: 5px;
		padding-left: 10px;
		display: flex;
		justify-content: space-between;
	}

	.flex-display {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #f2f2f2;
	}

	.order-info-li {
		padding-right: 10px;
	}

	/* 底部操作菜单样式 */
	.bottom-operate-menu {
		z-index: 1001;
		position: fixed;
		bottom: 0px;
		height: 55px;
		width: 100%;
		display: flex;
	}

	.shopping-cart {
		width: 75%;
		background: #353535;
		height: 100%;
	}

	.submit-btn-label {
		color: white;
		font-size: 15px;
		margin: auto;
	}

	.submit-btn {
		height: 100%;
		background: #f7f7f7;
		width: 25%;
		display: flex;
	}

	.activity-color-bg {
		background: #ff9c35;
	}
</style>
